<template>
    <div>
        <el-button type="warning" @click="toAddRole">新增角色</el-button>
        <el-table ref="multipleTable" tooltip-effect="dark" :data="gridData" @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column property="id" label="序号" width="150"></el-table-column>
            <el-table-column property="nameZh" label="角色名称" width="200"></el-table-column>
            <el-table-column property="name" label="英文名称" width="200"></el-table-column>
            <el-table-column property="created" label="创建时间" width="200"></el-table-column>
            <el-table-column property="img" label="图片路径" width="200"></el-table-column>
            <el-table-column  width="400">
                <template slot-scope="scope">
                    <el-link type="primary">编辑</el-link> |
                    <el-link type="warning">删除</el-link> |
                    <el-link @click="toSetMenu(scope.row)" type="danger">设置菜单</el-link>
                </template>

            </el-table-column>
        </el-table>


        <!--加载菜单树的dialog对话框-->

        <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
            <el-tree
                    ref="tree"
                    :data="treeData"
                    show-checkbox
                    node-key="id"
                    :default-expanded-keys="[2, 3]"
                    :default-checked-keys="checkedNodes"
                    :props="defaultProps">
            </el-tree>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogTableVisible = false">取 消</el-button>
                <el-button type="primary" @click="setMenu">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "Role",
        data() {
            return {
                gridData: [],
                multipleSelection:[],
                currentPage:1,
                pageSize:6,
                treeData: [],
                dialogTableVisible: false,
                formLabelWidth: '120px',
                rid :0,
                checkedNodes:[],//被选中的树节点,
                defaultProps: { //此处是实体类和json的字段名称不一致时候,可以在前端这里指定
                    children: 'children',
                    label: 'label'
                }
            }
        },
        methods: {
            setMenu(){
                //设置权限(菜单)
                console.log(this.$refs.tree.getHalfCheckedKeys()+"*****************")
                console.log(this.$refs.tree.getCheckedKeys()+"@@@@@@@@@@@@@@@@")
                //未全选包含父节点的数据,包含父节点的数据
                console.log(this.$refs.tree.getHalfCheckedKeys().concat(this.$refs.tree.getCheckedKeys())+"^^^^^^^^^^^^")
                //往 数组里加上选中的节点id
                this.checkedNodes=this.$refs.tree.getCheckedKeys()
                this.dialogTableVisible=false
                this.axios.post("http://localhost:9001/menu/saveMenuRole",{"mids":this.$refs.tree.getHalfCheckedKeys().concat(this.$refs.tree.getCheckedKeys()),"rid":this.rid}).then(resp=>{
                    if(resp.data){
                        alert("成功!")
                        this.initRoles()
                    }else{
                        alert("fail!!!")
                    }
                })
            },
            toSetMenu(row){
                this.dialogTableVisible=true;//打开对话框
                this.rid=row.id
                //查询所有的树,并且查询当前角色对应的菜单,实现回显
                this.axios.get("http://localhost:9001/menu/getTree",{params:{"roleId":row.id}}).then(resp=>{
                    this.$refs.tree.setCheckedKeys([]);//清除选中的
                    this.treeData=resp.data.data.menuList;
                    this.checkedNodes=resp.data.data.mids;
                })

            },
            toAddRole(){

            },
            initRoles(){
                //发送一个请求到后台,查询列表
                this.axios.get("http://localhost:9001/role/list",
                    {params:{
                            pageNum:this.currentPage,
                            pageSize:this.pageSize
                        }}).then((resp)=>{
                    console.log(resp.data)
                    this.gridData=resp.data.data.records;
                })
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            handleSelectionChange(value){
                this.multipleSelection=value
            }
        },
        created() {
            this.initRoles()
        }
    }
</script>

<style scoped>

</style>
